<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/mediatyle.css"> 
    <link rel="stylesheet" href="./css/rest.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>
        [v-cloak]{
            display: none;
        }
        #app{
            background-color: #f5f5f5;
        }
    </style>
</head>
<body class="___index___">
    <div id="app" v-cloak>
        <div class="top-nav">
            <img class="left-logo" v-if="!isShowInp" src="./images/logo.png" alt="">
            <div class="searchIup" v-else>
                <input type="text" v-model="searchVal">
                <i class="close" @click="isShowInp = false"></i>
            </div>
            
            <div class="right-content">
                <img class="search-icon" @click="showInp()" src="./images/search.png" alt="">
                <img class="nav-icon" @click="iShowNav = !iShowNav" src="./images/navIcon.png" alt="">
            </div>
        </div>
        <div class="swiperOne mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) of bannerList" :key="index" @click="goDetails(item.id)">
                    <img :src="item.thumb" alt="">
                    <p>{{item.title}}</p>
                </div> 
            </div>
            <div class="swiper-pagination"></div>
        </div>
       <div class="first-box mid-box">
            <div class="f-nav">
                <p v-for="(item,index) of newsOneList" :class="currentOneIdx==index?'on':''" @click="currentOneIdx=index" :key="index">{{item.name}}</p>
            </div>
            <div class="f-content">
                <div class="air-box" v-if="currentOneIdx == 0">
                    <div v-html="branchContent.content" @click="goDetails(branchContent.id)"></div>
                 </div>
                <div class="list-box" v-else>
                    <div class="item" v-for="(item,index) of newsOneList[currentOneIdx]['articles'].slice(0,5)" @click="goDetails(item.id)">
                        <p class="item-txt">{{item.title}}</p>
                        <p class="item-time">{{item.createTime.slice(0,10)}}</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="s-box">
            <div class="s-nav">
                <p v-for="(item,index) of newsTwoList" :class="currentTwoIdx==index?'on':''" @click="currentTwoIdx=index" :key="index">{{item.name}}</p>
            </div>
            <div class="list-box" v-if="newsTwoList[currentTwoIdx]">
                <div class="item" v-for="(item,index) of newsTwoList[currentTwoIdx].articles" @click="goDetails(item.id)">
                    <p class="item-txt">{{item.title}}</p>
                    <p class="item-time">{{item.createTime.slice(0,10)}}</p>
                </div>
            
            </div>
        </div>
        <div class="s-box">
            <div class="s-nav">
                <p v-for="(item,index) of newsThreeList" :key="index" @click="currentThreeIdx=index" :class="currentThreeIdx==index?'on':''">{{item.name}}</p>
            </div>
            <div class="list-box" v-if="newsThreeList[currentTwoIdx]">
                <div class="item" v-for="(item,index) of newsThreeList[currentTwoIdx].articles" @click="goDetails(item.id)" :key="index" >
                    <p class="item-txt">{{item.title}}</p>
                    <p class="item-time">{{item.createTime.slice(0,10)}}</p>
                </div>
            </div>
        </div>
        <div class="s-box">
            <div class="s-nav">
                <p class="on" style="margin-right: .36rem;">会员服务</p>
                <img src="./images/titleLog.png" alt="">
            </div>
            <div class="member-box">
                <div class="member-item">
                    <img src="./images/icon1.png" alt="">
                    <p>信息查询</p>
                </div>
                <div class="member-item">
                    <img src="./images/icon2.png" alt="">
                    <p>在线申请</p>
                </div>
                <div class="member-item">
                    <img src="./images/icon3.png" alt="">
                    <p>资源下载</p>
                </div>
                <div class="member-item">
                    <img src="./images/icon4.png" alt="">
                    <p>互动交流</p>
                </div>
            </div>
        </div>
        <div class="img-list">
            <div class="img-item">
                <img src="./images/imgbg.png" alt="">
            </div>
            <div class="img-item">
                <img src="./images/imgbg.png" alt="">
            </div>
            <div class="img-item">
                <img src="./images/imgbg.png" alt="">
            </div>
        </div>
        <div class="product-box s-box">
            <div class="s-nav" v-if="productsList[0]">
                <p class="on" style="margin-right: .36rem;">{{productsList[0].name}}</p>
                <span>查看更多 ></span>
            </div>
            <div class="product-list">
                <div class="product-item" v-for="(item,index) of productsList" :key="index" @click="goDetails(item.id)">
                    <img :src="item.thumb" alt="">
                    <div class="right-msg">
                        <p class="tit">{{item.title}}</p>
                        <p class="txt" v-html="item.content"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-box s-box" style="padding-bottom: 0;">
            <div class="s-nav" v-if="expertsList[0]">
                <p class="on" style="margin-right: .36rem;">{{expertsList[0].name}}</p>
                <span>查看更多 ></span>
            </div>
            <div class="expert_list">
                <div class="expert_item" v-for="(item,index) of expertsList" :key="index" @click="goDetails(item.id)">
                    <img :src="item.thumb" alt="">
                    <span>{{item.title}}</span>
                    
                </div>
            </div>
        </div>
        <div class="product-box s-box" style="padding-bottom: 0;">
            <div class="s-nav" v-if="membersList[0]">
                <p class="on" style="margin-right: .36rem;">{{membersList[0].name}}</p>
                <span>查看更多 ></span>
            </div>
            <div class="list-logo">
                <img v-for="(item,index) of membersList" :src="item.thumb" alt="">
            </div>
        </div>
        <div class="footer-box " style="position: relative;">
            <div class="footer-top-box">
                <div class="footer-top">联系我们</div>
                <div class="footer-middle">
                    <p>联系电话：400-888-8888</p>
                    <p>服务时间：周一至周日 9:00-21:00</p>
                </div>
                <div class="footer-bottom-box">
                    <div class="erw-box">
                        <img src="./images/ewmM.jpg" alt="">
                        <p>关注公众号</p>
                    </div>
                    <div  class="erw-box">
                        <img src="./images/ewm.png" alt="">
                        <p>专属商务客服</p>
                    </div>
                </div>
            </div> 
            <div class="footer-bottom">
                <p>© 2024 数字经济公共服务平台 版权所有</p>
                <p><a href="https://beian.miit.gov.cn/">赣ICP备2024036929号</a></p>
                <!-- <p>技术支持：xx科技有限公司</p> -->
            </div>
        </div>
        <div class="popBox" v-if="iShowNav">
            <div class="pop-center">
                <img src="./images/cancel.png" @click="iShowNav=false" class="cancel" alt="">
                <p class="nav-item" @click="goIndexPage()">首页</p>
                <p v-for="(item,index) of navList" class="nav-item" @click="goList(item)" :key="index">{{item.name}}</p>
            </div>
        </div>
    </div>
</body>
<script src="./js/rem_count.js"></script>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/swiper-bundle.min.js"></script>

<script src="./js/config.js"></script>
<script>
    new Vue({
            el: '#app',
            data() {
                return {
                    swiper:null,
                    baseUrl:baseUrl,
                    navList:[],
                    newsOneList:[],
                    newsTwoList:[],
                    newsThreeList:[],
                    branchContent:'',
                    currentOneIdx:0,
                    currentTwoIdx:0,
                    currentThreeIdx:0,
                    productsList:[],
                    expertsList:[],
                    membersList:[],


                    currentNewsIdx:0,
                    currentPolicysIdx:0,
                    policysList:[],
                    servicesList:[],
                    parksList:[],
                    expertsList:[],
                    friendsList:[],
                    isShowInp:false,
                    iShowNav:false,
                    searchVal:'',
                    bannerList:[]
                }
            },
            created(){     
                
            },
            mounted(){
                this.$nextTick(() => {
                    this.getSwiper()
                    this.getIdxData()
                    // this.getSwiperT()10000                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           15  
                    this.getNavList()
                    
                    // this.getBanner()
                })
            },
            methods:{
                getSwiper(){
                    this.swiper = new Swiper(".swiperOne", {
                        autoplay: { //自动开始
                            delay: 3000, //时间间隔
                            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
                        },
                        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
                        observer: true,
                        observeParents: true,
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true, // 分页器可以点击
                        },
                    });
                },
                getNavList(){
                    axios.post(this.baseUrl+'index/getCategory', {})
                    .then( (res)=> {
                        console.log(res)
                        this.navList = res.data.data
                    })
                    .catch( (error)=> {
                        console.log(error);
                    });
                },
                getIdxData(){
                    axios.post(this.baseUrl+'index/showHDPIndex', {})
                    .then( (res)=> {
                        this.bannerList = res.data.data.banners.slice(0, 3)
                        res.data.data.news1.unshift(res.data.data.branch[0]) 
                        this.newsOneList = res.data.data.news1
                        this.branchContent = res.data.data.branch[0]
                        this.newsTwoList = res.data.data.news2
                        this.newsThreeList = res.data.data.specials
                        this.productsList = res.data.data.products
                        this.expertsList = res.data.data.experts
                        this.membersList = res.data.data.members
                        // this.navList = res.data.data.navs
                        // this.newsList = res.data.data.news
                        // this.policysList = res.data.data.policys
                        // this.servicesList =res.data.data.services
                        // this.parksList = res.data.data.parks
                        // this.expertsList = res.data.data.experts
                        // this.friendsList = res.data.data.friends
                    })
                    .catch( (error)=> {
                        console.log(error);
                    });
                },
                showInp(){
                    if(this.isShowInp ){
                        window.location.href = './search.html?title='+this.searchVal
                        // if(this.searchVal){
                          
                        // }
                    }else{
                        this.isShowInp = true
                    }
                },
                goList(item){
                    window.location.href = './list.html?title='+item.name+'&id='+item.id
                },
                goDetails(id){
                    window.location.href = './details.html?id='+id
                },
                getBanner(){
                    axios.post(this.baseUrl+'index/getBannerList',{} ).
                    then(res=>{
                        this.bannerList = res.data.data.slice(0, 3)
                        console.log(res.data.data,'2311321321')
                    })
                },
                goIndexPage(){
                    window.location.href = './index.html'
                }
            }
        })
</script>
</html>